import { ref, nextTick } from 'vue'

export function useEditPos(textInputRef, imageRef) {
  const isEditing = ref(false)
  const isResizing = ref(false)
  const textContent = ref('')
  const baseWidth = ref(200) // 输入框基础宽度
  const initialFontSize = ref(20) // 初始字体大小
  const currentFontSize = ref(initialFontSize.value) // 当前字体大小
  const inputSize = ref({ width: 200, height: 40 }) // 输入框尺寸
  const editPosition = ref({ x: 0, y: 0 }) // 编辑的位置

  // 处理点击事件
  const handleImageClick = (event) => {
    if (event.target !== imageRef.value) return

    const rect = event.target.getBoundingClientRect()
    const x = event.clientX - rect.left
    const y = event.clientY - rect.top

    editPosition.value = { x, y }
    isEditing.value = true
    textContent.value = ''
    currentFontSize.value = initialFontSize.value

    // 计算基于字体大小的初始高度
    const lineHeight = Math.round(initialFontSize.value * 1.5) // 设置行高为字体大小的1.5倍
    inputSize.value = {
      width: 200,
      height: lineHeight
    }
    baseWidth.value = inputSize.value.width

    nextTick(() => {
      textInputRef.value?.focus()
      adjustInputSize()
    })
  }

  const minWidth = ref(100) // 最小宽度
  // 调整输入框大小的方法
  const adjustInputSize = () => {
    const tempSpan = document.createElement('span')
    tempSpan.style.visibility = 'hidden'
    tempSpan.style.position = 'absolute'
    tempSpan.style.fontSize = `${currentFontSize.value}px`
    tempSpan.style.whiteSpace = 'nowrap'
    tempSpan.textContent = textContent.value || '输入文字'

    document.body.appendChild(tempSpan)
    const textWidth = tempSpan.offsetWidth
    const lineHeight = Math.round(currentFontSize.value * 1.5) // 设置行高为字体大小的1.5倍
    document.body.removeChild(tempSpan)

    // 设置输入框宽度和高度
    inputSize.value = {
      width: Math.max(minWidth.value, textWidth + 20),
      height: lineHeight
    }
  }

  const resizeType = ref('')
  const startPos = ref({ x: 0, y: 0 })
  const startSize = ref({ width: 0, height: 0 })
  // 四个角的调整事件
  const startResize = (type, event) => {
    event.preventDefault() // 防止触发其他事件
    isResizing.value = true
    resizeType.value = type
    const lastPos = {
      x: event.clientX,
      y: event.clientY
    }
    startPos.value = {
      x: event.clientX,
      y: event.clientY
    }
    startSize.value = {
      width: inputSize.value.width,
      height: inputSize.value.height
    }
    const initialFontSize = currentFontSize.value
    document.onmousemove = (docEvent) => handleResize(docEvent, lastPos, initialFontSize)
    document.onmouseup = function () {
      isResizing.value = false
      document.onmousemove = document.onmouseup = null
    }
  }

  const handleResize = (event, lastPos, initialFontSize) => {
    if (!isResizing.value) return

    const deltaX = event.clientX - startPos.value.x
    const moveX = event.clientX - lastPos.x
    // 计算缩放比例
    let scale = 1

    // 重置上次位置
    const resizeLastPos = () => {
      lastPos.x = event.clientX
      lastPos.y = event.clientY
    }

    // 确保最小缩放比例
    const resizeScale = () => {
      const minScale = minWidth.value / startSize.value.width
      scale = Math.max(minScale, scale)
      return scale === minScale
    }

    switch (resizeType.value) {
      case 'top-left':
        scale = (startSize.value.width - deltaX) / startSize.value.width
        if (!resizeScale()) editPosition.value.x += moveX
        break
      case 'top-right':
        scale = (startSize.value.width + deltaX) / startSize.value.width
        resizeScale()
        break
      case 'bottom-left':
        scale = (startSize.value.width - deltaX) / startSize.value.width
        if (!resizeScale()) editPosition.value.x += moveX
        break
      case 'bottom-right':
        scale = (startSize.value.width + deltaX) / startSize.value.width
        resizeScale()
        break
    }

    resizeLastPos()

    // 等比例更新尺寸
    const newWidth = Math.round(startSize.value.width * scale)
    const newHeight = Math.round(startSize.value.height * scale)

    // 更新尺寸
    inputSize.value = {
      width: newWidth,
      height: newHeight
    }

    // 更新字体大小
    currentFontSize.value = Math.max(12, Math.min(80, Math.round(initialFontSize * scale)))
  }

  return {
    textContent,
    isEditing,
    isResizing,
    baseWidth,
    inputSize,
    editPosition,
    initialFontSize,
    currentFontSize,
    startResize,
    handleResize,
    handleImageClick,
    adjustInputSize
  }
}